<template>
  <div class="execution">
    <basic-container>
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="采购单编号">
          <el-input v-model="formInline.serialNum" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询采购单</el-button>
        </el-form-item>
      </el-form>

      <h2 class="title">
        请款清单
      </h2>

      <!--请款清单数据表格-->
      <div class="requestPayoutTable">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="serialNum"
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="PlePayee"
              label="请款人"
              width="180">
            </el-table-column>
            <el-table-column
              prop=" purchaseOrdersNum"
              label="采购单编号">
            </el-table-column>
            <el-table-column
              prop="purchaseOrdersType"
              label="采购类型">
            </el-table-column>
            <el-table-column
              prop="supplier"
              label="供应商">
            </el-table-column>
            <el-table-column
              prop="purchaseOrdersMoney"
              label="采购金额">
            </el-table-column>
            <el-table-column
              label="请款金额">
              <template slot-scope="scope">
                <el-input v-model="PleMoney" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="备注">
              <template slot-scope="scope">
                <el-input v-model="remark" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="aggregate">
        <h4>商品数量  10  件&nbsp;&nbsp;&nbsp;合计金额：￥5000.00</h4>
      </div>

      <!--图片信息模块-->
      <h2 class="title">
        图片信息
        <span>仅支持jpg,jpeg,png格式，文件小于2M,最多添加5张图</span>
      </h2>
      <div class="addImg">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div class="refReason">
        退款原因&nbsp;&nbsp;
        <el-select v-model="refundReason" placeholder="请选择退款原因">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="buttonGroup">
        <el-button type="primary">提交</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </basic-container>
  </div>
</template>

<script>
    export default {
        name: "index",
      data() {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
          input:'',
          formInline: {
            serialNum: '',
          },
          tableData: [{
            serialNum: '2016-05-02',
            PlePayee: '王小虎',
            purchaseOrdersNum: '上海市普陀区金沙江路 1518 弄',
            purchaseOrdersType:'111',
            supplier:'222',
            purchaseOrdersMoney:'33',
          }],
          remark:'',
          PleMoney:'',
          options: [{
            value: '选项1',
            label: '黄金糕'
          }],
          refundReason:''
        }
      },
      methods: {
        onSubmit() {
          console.log('submit!');
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }
      }
    }
</script>

<style lang="scss" scoped>
  .requestPayoutTable{
    margin: 20px 0;
  }
  .aggregate{
    &:after{
      content: "";
      height: 0;
      display: block;
      overflow: hidden;
      clear: both;
    }
    h4{
      float: right;
      font-weight: 400;

    }
  }
  .title{
    span{
      font-size: 14px;
      font-weight: 400;
      color: #999;
    }
  }
  .addImg{
    margin-top: 20px;
  }
  .refReason{
    margin-top: 20px;
    .el-select{
      width: 40%!important;
    }
  }
  .buttonGroup{
    margin-top: 20px;
  }
</style>
